<link rel="stylesheet" type="text/css" href="static/hotel/css/monitor.css">
<div id="monitorArea" style="width:100%;height:100%;overflow: hidden;"></div>

<!-- 搜索部分--begin -->
<div id="monitorSearch" class="monitorSearchBox">
	<form id="monitorSearchForm">
	<table cellpadding="5">
		<tr>
			<td>所属区域:</td>
			<td>
				<@eu.comboBox id="roomServiceAreaSearch" url="common.do?loadComboBox&key=SERVICE_AREA&isSearch=true" name="serviceAreaSearch" onSelect="monitorDataFilter()"/>
			</td>
			<td>所属楼层:</td>
			<td>
				<@eu.comboBox id="roomFloorSearch" url="common.do?loadComboBox&key=ROOM_FLOOR&isSearch=true" name="roomFloorSearch" onSelect="monitorDataFilter()"/>
			</td>
			<td>房间类型:</td>
			<td>
				<@eu.comboBox id="roomTypeSearch" url="common.do?loadComboBox&key=ROOM_TYPE&isSearch=true" name="roomTypeSearch"  onSelect="monitorDataFilter()"/>
			</td>
			<td>房间状态:</td>
			<td>
				<@eu.comboBox id="roomStatusSearch" url="common.do?loadComboBox&key=ROOM_STATUS&isSearch=true" name="roomStatusSearch" onSelect="monitorDataFilter()"/>
			</td>
			<td>
				房间号:
			</td>
			<td>
				<input id="roomNoSearch" name="roomNo"  class="easyui-validatebox" onchange="monitorDataFilter()" onkeyup="monitorDataFilter()"/>
			</td>
			<td>
				<@eu.linkbutton showName="切换模式" shiro="hotel:device:add" iconCls="icon-switch" onclick="switchMode();"/>
<!-- 				<@eu.linkbutton showName="重置" shiro="hotel:device:reset" iconCls="icon-clear" onclick="clearSearcher();"/> -->
<!-- 				<@eu.linkbutton showName="全选切换" shiro="hotel:device:add" iconCls="icon-switch" onclick="selectAll();"/> -->
<!-- 				<@eu.linkbutton showName="获取选中" shiro="hotel:device:add" iconCls="icon-switch" onclick="getSelects();"/> -->
<!-- 				,iconCls:'icon-switch' -->
<!-- 				<a id="switchBtn" href="#" class="easyui-linkbutton" data-options="toggle:true" onclick="switchBtn()">开</a> -->
			</td>
		</tr>
	</table>
	</form>
</div>
<!-- 搜索部分--end -->
	
<!-- 底部统计--end -->
<div id="monitorAreaFooter">
	<div style="float: left;margin-left: 5px;">
    		房间数量:<span id="monitorCount">0</span>
   	</div>
   	<div class="divBorder" style="margin-left: 5%;">
		<img height="12px" src="static/hotel/images/yellowPilot.png"/>脏空:<em id="monitorClearCount">0</em>&nbsp;
		<img height="12px" src="static/hotel/images/workoffPilot.png"/>入住:<em id="monitorWorkOffCount">0</em>&nbsp;
   		<img height="12px" src="static/hotel/images/redPilot.png"/>故障:<em id="monitorMaintainCount">0</em>&nbsp;
   		<img height="12px" src="static/hotel/images/greenPilot.png"/>干净:<em id="monitorCleanCount">0</em>&nbsp;
		<img height="12px" src="static/hotel/images/outPilot.png"/>预退:<em id="monitorOutCount">0</em>
    </div>
</div>
<div id="alarmSound"></div>
<!-- 底部统计--end -->


<script>
	var monitorLayout = new dhtmlXLayoutObject("monitorArea", "1C");
	monitorLayout.cells("a").hideHeader();
	monitorLayout.attachHeader("monitorSearch");
	var monitorStatusBar = monitorLayout.cells("a").attachStatusBar();
	monitorStatusBar.setText($("#monitorAreaFooter").html());
// 	$("#monitorAreaFooter").remove();
	var mode = '2';
	var roomMonitorClientId= "roomMonitor"+new Date().getTime();
	var rtDataView;
	initRtDataView();
	
	printLog('load');
	function initRtDataView() {
		printLog('initRtDataView');
		var width = mode=='1'?100:200;
		var height = mode=='1'?100:220;
		printLog('模式='+mode);
		var dataViewConfig = {
				type: {
// 					template: "html->monitorTemplateContainer"+mode,
					template:function(obj){
						return createDataViewHtml(obj,mode);
					},
					width:width,
					height:height,
					margin:0,
					padding:3,
					select:"multiselect",
				}
			};
		rtDataView = monitorLayout.cells("a").attachDataView(dataViewConfig);
		rtDataView.load("room.do?loadAllMonitingRooms&clientId="+roomMonitorClientId, "json", function(){
			monitorDataFilter();
	    });
		rtDataView.attachEvent("onItemDblClick", function(id){
			var data = rtDataView.get(id);
			printLog(data);
			fiterRoomStatu(data);
		});
		
// 		rtDataView.attachEvent("onItemClick", function(id){
// 	 		
// 		});
	}
	var runMonitorRoom = {};
	function createDataViewHtml(obj,mode) {
		var html = "";
		if(!obj.customer) obj.customer='';
		if(mode=='1') {
			html = '<div align="center"><div onmouseover="showPopUpInfo(this);" onmouseout="hidePopUpInfo(this);"><img onmousedown="return false;" border="0" src="static/hotel/images/room'+obj.status+'.png"><div class="displayN" style="position: fixed;top: 263px;left: 325px;z-index: 9999999;display:none;" align="left"><div class="poPupInfo" style="padding:0px;margin: 0px;"><p class="poPupInfo_title_p" style="padding:0px;margin: 0px;">房间信息</p><table class="poPupInfo_text_table"><tr><td>状态:</td><td>'+roomStatusMap[obj.status]+'</td></tr>';
			var deviceLinks = obj.compomentInfosMap;
// 			printLog(deviceLinks);
			for(var index in deviceLinks) {
				var type = deviceLinks[index].type;
				var cs = deviceLinks[index].status;
				if(type!='node') {
					html += '<tr><td>'+deviceLinkTypeMap[type]+'状态:</td><td>'+componentStatusMap[cs]+'</td></tr>';
				}
			}
			
			html += '</table><div><ul class="poPupInfo_op_ul">';
			if(obj.operationStatus) {
				for(var key in obj.operationStatus) {
					html += '<li style="color:orange;">'+obj.operationStatus[key]+'</li>';
				}
			}
// 			printLog(obj.operationStatus);
			html += '<li style="border-top: 1px dotted #999999;" onclick="roomOperation('+obj.id+')" title="详细控制">详细控制</li></ul></div></div></div><p class="dhx_item_text" style="word-wrap:break-word; word-break:normal;" title="'+obj.name+'">'+obj.roomNo+'</p><p>'+obj.customer+'</p></div></div>';
		}else if(mode=='2') {
// 			html = '<div align="center" style="position: relative;width:260px;height:280px;"><table cellpadding="5"><tbody><tr><td colspan="2" rowspan="2" style="text-align: left;width:99px;"><img border="0" src="static/hotel/images/room1.png"></td><td>房号</td><td>101</td></tr><tr><td>状态</td><td>脏空</td></tr><tr><td colspan="2">空调状态:</td><td colspan="2">关</td></tr></tbody></table></div></div>';
// 			html = '<div align="center" style="position: relative;height:220px;"><table cellpadding="5"><tr><td colspan="2" rowspan="2" style="text-align: left;width:99px;"><img border="0" src="static/hotel/images/room'+obj.status+'.png"></td><td>房号</td><td>'+obj.roomNo+'</td></tr><tr><td>状态</td><td>'+roomStatusMap[obj.status]+'</td></tr>';
// 			var deviceLinks = obj.compomentInfosMap;
// 			for(var index in deviceLinks) {
// 				var type = deviceLinks[index].type;
// 				var cs = deviceLinks[index].status;
// 				if(type!='node') {
// 					html += '<tr><td colspan="2">'+deviceLinkTypeMap[type]+'状态:</td><td colspan="2">'+componentStatusMap[cs]+'</td></tr>';
// 				}
// 			}
// 			html += '</table><div style="position: absolute;right: 2px;bottom:2px;">'
// 			if(obj.customer) html += '<span style="float:left;width:150px;">'+obj.customer+'</span>';
// 			html += '<a href="#" onclick="roomOperation('+obj.id+')" title="详细控制" style="text-decoration:none;">详细控制</a></div></div>';

		}
		//设置弹出报警
		//存放监控
		runMonitorRoom[obj.id]=obj;
// 		printLog(obj);
// 		if(obj.status=='3') {
// // 			alarmHandle(obj);
// // 			printLog('4564654');
// 			openMsg({title:'报警提醒',msg:obj.roomNo+'顾客报警',width:300,height:200,timeout:0,position:'bottomRight',icon:'warning'});
// 			openAlarmSound();
// 		}else if(!isOpenAlarm){
// 			closeAlarmSound();
// 		}
		return html;
	}
// 	window.setInterval("alarmRunning()" , 5000);
	var alarmRunningTime = window.setTimeout("alarmRunning()" , 200);
	var alarmWin = null;
	function alarmRunning() {
// 		printLog(runMonitorRoom);
			var c = '';
			for(var index in runMonitorRoom)
			{
				var obj = runMonitorRoom[index];
				if(obj.status=='3') {
					c += obj.roomNo+'报警<br />';
				}
				
			}
			if(alarmWin) alarmWin.window('close');
			if(c!='') {
				alarmWin = openMsg({title:'报警提醒',msg:c,width:300,height:200,timeout:0,position:'bottomRight',icon:'warning'});
				openAlarmSound();
			}else {
				closeAlarmSound();
			}
			window.clearTimeout(alarmRunningTime);
			alarmRunningTime = window.setTimeout("alarmRunning()" , 5000);
	}
	
	var isOpenAlarm = false;
	function openAlarmSound() {
		closeAlarmSound();
		isOpenAlarm = true;
		printLog('报警');
		var sound = "static/hotel/alarm.wav";
		if (isFirefox()||isChrome())
		{
			$("#alarmSound").html("<audio id='alarmAudio' controls='controls' hidden='true' loop='true' ><source name = 'soundname' src='"+sound+"' type='audio/mp3' preload='auto' /><source name = 'soundname' src='"+sound+"' type='audio/x-wav' preload='auto'/><embed name = 'soundname' height='100' width='100' src='"+sound+"' preload='auto'/></audio>");
			alarmAudio.play();
		}
		else
		{
			$("#alarmSound").html("<bgsound id='myaudio' src='"+sound+"' loop='-1'/>");
		}
	}
	
	//报警声音
	function closeAlarmSound()
	{
		if (isFirefox()||isChrome())
		{
			$("#alarmAudio").remove();
		}else
		{
			$("#alarmAudio").attr("src","");
			$("#alarmAudio").attr("volume","-10000");
			$("#alarmSound").html("<bgsound id='alarmAudio' src='#' loop='-1'/>");
		}
	}
	
	
// 	rtDataView.attachEvent("onItemClick", function(id){
// 		printLog(id);
// 		var check = rtDataView.isSelected(id);
// 		printLog(check);
// 		if(check) {
// 			rtDataView.unselect(id);
// 		}else {
// 			rtDataView.select(id);
// 		}
		
// 	});
	//进行条件过滤
	function monitorDataFilter()
	{
		rtDataView.filter((function(obj,value){
			printLog(obj.roomFloor);
			printLog($("#roomFloorSearch").combobox('getValue'));
			if(($("#roomNoSearch").val() == "" || obj.roomNo.indexOf($("#roomNoSearch").val()) != -1) 
			   &&(($("#roomFloorSearch").combobox('getValue') == "" || obj.roomFloor.indexOf($("#roomFloorSearch").combobox('getValue')) != -1))
			   &&(($("#roomTypeSearch").combobox('getText') == ""||$("#roomTypeSearch").combobox('getText') == "------" || obj.type.indexOf($("#roomTypeSearch").combobox('getText')) != -1))
			   &&(($("#roomServiceAreaSearch").combobox('getValue') == "" || obj.serviceArea.indexOf($("#roomServiceAreaSearch").combobox('getValue')) != -1))
			   &&(($("#roomStatusSearch").combobox('getValue') == "" || obj.status.indexOf($("#roomStatusSearch").combobox('getValue')) != -1)))
			{
				printLog("true");
				return true;
			}
			printLog("false");
			return false;
		}),'monitor');
		setMonitorFooter();
// 		event.PreventDefault();
	}
	
	function setMonitorFooter() {
		//1 脏空 入住 故障 干净 预退
		var clearCount = 0;//脏空
	    var cleanCount = 0;//干净
	    var maintainCount = 0;//故障
	    var outCount = 0;//预退
	    var workOffCount = 0;//入住
	    
        for(var i = 0; i < rtDataView.dataCount(); i++)
        {
        	var connect = rtDataView.get(rtDataView.idByIndex(i)).status;
        	switch (parseInt(connect))
	    	{
				case 1:
					clearCount++;
					break;
				case 2:
					workOffCount++;
					break;
				case 3:
					maintainCount++;
					break;
				case 4:
					cleanCount++;
					break;
				case 5:
					outCount++;
					break;
			}
        }
		$("#monitorClearCount").html(clearCount);
		$("#monitorCleanCount").html(cleanCount);
		$("#monitorMaintainCount").html(maintainCount);
		$("#monitorOutCount").html(outCount);
		$("#monitorWorkOffCount").html(workOffCount);
		
		$("#monitorCount").html(rtDataView.dataCount());
	}
	
	var isSelectAll = false;
	function selectAll() {
		if(isSelectAll) {
			rtDataView.unselect();
		}else {
			rtDataView.select();
		}
		isSelectAll = !isSelectAll;
// 		openMsg({title:'dddd',msg:'2222',width:300,height:200,timeout:0,position:'bottomRight'});
	}
	
	function getSelects() {
		var ids = rtDataView.getSelected();
		printLog(ids);
	}
	
	//切换模式
	function switchMode() {
		printLog('切换模式');
		roomMonitorClientId= "roomMonitor"+new Date().getTime();
		mode = mode=='1'?'2':'1';
		initRtDataView();
	}
	
	
	//监控启动
	var monitorRunningTime = window.setTimeout("monitorRunning()" , 5000);
	var jqAjax = null;
	function monitorRunning()
	{
		window.clearTimeout(monitorRunningTime);
		if(jqAjax)
    	{
    		jqAjax.abort();//中断请求
    	}
		jqAjax = $.ajax({
		    type: "GET",
		    url: "room.do?loadAllMonitingRooms&clientId="+roomMonitorClientId,
// 			url:"hotelMonitor.do?moniting&clientId=" + new Date().getTime(),
		    dataType: "json",
		    async: true,
		    success: function(data)
		    {
				if(data != null&&data.length>0)
				{
					dealRoomMonitorData(data);
				}
// 				printLog(data);
				monitorRunningTime = window.setTimeout("monitorRunning()" , 5000);
		    },
		    error:function (XMLHttpRequest, textStatus, errorThrown)
		    {
	 			window.clearTimeout(monitorRunningTime);
	 		}
		});
	}
	//处理房间状态
	function dealRoomMonitorData(data)
	{
		var length = data.length;
		if(length > 0)
		{
			for(var i=0;i<length;i++)
            {
				var id = data[i].id;	
				if(rtDataView.exists(id))//判断是否存在该id（修改）
				{
					var viewData = rtDataView.get(id);
					rtDataView.set(id, $.extend(viewData,  data[i]));
                }
                else//新增
                {
                	rtDataView.add(data[i]);
//                 	printLog('新增'+id);
//                 	devMonitorGrid.addRow(id, dataObj.rows[i].data);
//                 	devMonitorGrid.setRowTextStyle(id, dataObj.rows[i].style);
                }	
            }
			//重新统计
			setMonitorFooter();
		}
		
// 		for(var index in data)
// 		{
// 			var id = data[index].id;
			
// 			if(id==undefined) continue;
// 			if(rtDataView.exists(id))
// 			{
// 				var viewData = rtDataView.get(id);
// 				rtDataView.set(id, $.extend(viewData,  data[index]));
// 			}
// 		}
	}
	
	//显示浮动信息
	function showPopUpInfo(obj)
	{
		var offsetTop = $(obj).offset().top + $(obj).height()/1.5 - $(document).scrollTop();
		if($(document.body).height() - offsetTop < $(obj).children("div").height())//判断距离底部的距离是否小于提示框的高度
		{
			offsetTop = $(obj).offset().top - ($(document).scrollTop() + $(obj).children("div").height() + 10) + $(obj).height()/2.5;
		}
		var offsetLeft = $(obj).offset().left + $(obj).width()/1.5 - $(document).scrollLeft();
		if($(window).width() - offsetLeft < $(obj).children("div").width())//判断距离底部的距离是否小于提示框的高度
		{
			offsetLeft = $(obj).offset().left - ($(document).scrollLeft() + $(obj).children("div").width() + 10) + $(obj).width()/2.5;
		}
		
		$(obj).children("div").css("top", offsetTop);
		$(obj).children("div").css("left", offsetLeft);
		$(obj).children("div").show();
		
	}
	
	//隐藏浮动信息
	function hidePopUpInfo(obj)
	{
		$(obj).children("div").hide();
	}
	
	function roomOperation(objId) {
		createFromWindowOptions({
			title:"房间控制",
			width:1100,
			height:600,
			maximizable:true,
			href: "room.do?operationRoom&roomId="+objId,
			callback:function(data) {
				saveRoomInfo();
			},
			enableSaveButton:false
		});
	}
	
	function switchBtn() {
// 		$('#switchBtn').linkbutton("setIcon", "icon-switch");
// 		$('#switchBtn').linkbutton("setText", "关");
// 		$('#switchBtn').linkbutton("setStyle", {
//             backgroundColor: "Red",
//             color: "Blue"
//         });
// 		var text = $('#switchBtn');
		var linkBtn = $('#switchBtn').linkbutton();//easyui-linkButton获取按钮text
// 		printLog(linkBtn[0].innerText);
		var text = linkBtn[0].innerText.trim();
// 		printLog(text+'-------开');
		if(text=='开') {
// 			printLog('开->关');
			$('#switchBtn').linkbutton({ text: "关"});
		}else if(text=='关') {
// 			printLog('关->开');
// 			$('#switchBtn').linkbutton({ text: "开", iconCls: "icon-switch" });
			$('#switchBtn').linkbutton({ text: "开"});
		}
		
	}
	
	function clearSearcher() {
		$('#monitorSearchForm').form('clear');
		monitorDataFilter();
	}
</script>